<template>
  <div class="communicate">
    <Son :msg="msg" @on-change="changeMsg" />
    <Event1 @click="handler1" />
    <Event2 />
    <Event3 />
    <div>
      <span>父组件v-model:{{ modelValue }}</span>
      <!-- <Event4 :modelValue="modelValue" @update:modelValue="handlerValue"/> -->
      <Event4 v-model="modelValue" />
    </div>
    <div>
      <span>父组件pageNumer{{ pageNumer }}</span>
      <br />
      <span>父组件pageSize{{ pageSize }}</span>
      <Event5 v-model:pageSize="pageSize" v-model:pageNumer="pageNumer" />
      <el-button @click="changePage">点我改变页数和页码</el-button>
    </div>
    <div>
      <el-button type="primary" size="small">我是elementUI的按钮</el-button>
      <Event6 type="primary" size="small" title="编辑按钮" />
    </div>
    <div>
      <h4>我是父组件的钱：{{ money }}</h4>
      <el-button @click="changeMoney">点我父组件和组件的值都改变</el-button>
      <Event7 ref="event7Ref" />
    </div>
    <div>
      <h4>爷爷组件：provide-inject：{{ car }}</h4>
      <Event8 />
    </div>
  </div>
</template>

<script setup lang="ts" name="communicate">
import Son from "@/views/vue3Study/communicate/components/son.vue";
import Event1 from "@/views/vue3Study/communicate/components/event1.vue";
import Event2 from "@/views/vue3Study/communicate/components/event2.vue";
import Event3 from "@/views/vue3Study/communicate/components/event3.vue";
import Event4 from "@/views/vue3Study/communicate/components/event4.vue";
import Event5 from "@/views/vue3Study/communicate/components/event5.vue";
import Event6 from "@/views/vue3Study/communicate/components/event6.vue";
import Event7 from "@/views/vue3Study/communicate/components/event7.vue";
import Event8 from "@/views/vue3Study/communicate/components/event8.vue";
import { ref, provide } from "vue";
let msg = ref<Number>(123);
let modelValue = ref<Number>(1000);
let pageSize = ref<Number>(20);
let pageNumer = ref<Number>(1);
let money = ref<Number>(100);
let event7Ref = ref();
let car = ref("法拉利");
defineExpose({
  money
});
provide("TOKEN", car);
/**
 * Son子组件触发
 */
const changeMsg = val => {
  console.log("msg", msg, val);
  msg.value += 1;
};
/**
 * Event1子组件触发
 */
const handler1 = () => {
  alert("123");
};
/**
 * 自定义事件
 */
const handlerValue = num => {
  modelValue.value = num;
};
/**
 * 组件上使用两个v-model
 */
const changePage = () => {
  pageSize.value += 1;
  pageNumer.value += 1;
};
/**
 * 通过ref改变子组件的值
 */
const changeMoney = () => {
  console.log("event7Ref", event7Ref);
  money.value += 1;
  event7Ref.value.money -= 10;
};
</script>

<style scoped lang="scss">
.communicate {
  display: flex;
  flex-wrap: wrap;
}
</style>
